<template>
  <div class='container'>
   <el-card>
     <!-- 顶部栏--搜索以及新增学科按钮 -->
     <el-row >
       <el-col :span="18">
         <el-row :gutter="10">
           <el-form ref="subjectForm" :model="subjectForm" label-width="80px">
            <el-col :span="8">
              <el-form-item label="学科名称:" >
                <el-input v-model="subjectForm.subjectName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" @click="deleteIptVal">清除</el-button>
              <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
          </el-col>
          </el-form>
         </el-row>
       </el-col>

       <el-col  :span="6" style="text-align: right">
        <el-button size="small" type="success" icon="el-icon-edit" @click="addSubject">新增学科</el-button>
       </el-col>
     </el-row>
     <!-- 消息提示 -->
    <el-alert
      type="info"
      :closable="false"
      show-icon>
      <template>
        数据一共{{total}}条
      </template>
    </el-alert>
    <!-- 表格 -->
    <subjects-table
    :data="subjectForm"
    :form="form"
    ref="subjectTable"
    @get-total="getTotal"
    @on-close="onClose" />
    <!-- 新增学科弹出层 -->
    <subjects-add
    :addSubjectDialogVisible.sync="addSubjectDialogVisible"
    :form="form"
    @on-save="onSave"
    @on-close="onClose" />
   </el-card>
  </div>
</template>

<script>

import subjectsTable from '@/module-hmmm/components/subjects/subjectsTable.vue'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  name: 'subjects',
  components: { subjectsTable, SubjectsAdd },
  data () {
    return {
      subjectForm: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      form: {
        subjectName: '',
        isFrontDisplay: '1'
      },
      total: 0,
      addSubjectDialogVisible: false
    }
  },
  created () {},
  computed: {},
  methods: {
    getTotal (e) {
      this.total = e
    },
    // 点击清除按钮
    deleteIptVal () {
      this.subjectForm.subjectName = ''
      this.$refs.subjectTable.getSubjectTableList()
    },
    // 点击搜索
    onSearch () {
      this.$refs.subjectTable.getSubjectTableList()
      this.subjectForm.page = 1
    },
    // 点击新增学科
    addSubject () {
      this.addSubjectDialogVisible = true
    },
    // 点击弹出层的确定，重新渲染列表
    onSave () {
      this.$refs.subjectTable.getSubjectTableList()
    },
    // 关闭弹层，清空输入框数据
    onClose () {
      this.form = {
        subjectName: '',
        isFrontDisplay: '1'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  padding: 10px;
}
</style>
